<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$lang.title}</title>
    <include file="common/tag"/>
    <link href="/static/css/oksub.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/index.css" rel="stylesheet" type="text/css">
</head>
<body class="ok-body-scroll console">
<div class="ok-body home">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="ok-card-title">{$lang.op_overview}-Bar</div>
                </div>
                <div class="ok-card-body map-body">
                    <div style="height: 100%;" id="report_details"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="ok-card-title">{$lang.op_overview}-Polar</div>
                </div>
                <div class="ok-card-body map-body">
                    <div style="height: 100%;" id="report_op_details"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="ok-card-title">{$lang.search}{$lang.data_distribute}</div>
                </div>
                <div class="ok-card-body map-body">
                    <div style="height: 100%;" id="report_search"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="ok-card-title">{$lang.export}{$lang.data_distribute}</div>
                </div>
                <div class="ok-card-body map-body">
                    <div style="height: 100%;" id="report_export"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="ok-card-title">{$lang.add}{$lang.data_distribute}</div>
                </div>
                <div class="ok-card-body map-body">
                    <div style="height: 100%;" id="report_add"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="ok-card-title">{$lang.edit}{$lang.data_distribute}</div>
                </div>
                <div class="ok-card-body map-body">
                    <div style="height: 100%;" id="report_edit"></div>
                </div>
            </div>
        </div>
    </div>

    <div id="details" style="width: 1200px;height:600px;margin-left: 20px;padding-top: 10px;display: none"></div>

</div>
</body>
</html>
<script>
    $(function () {

        let report_search = echarts.init(document.getElementById('report_search'));
        let report_export = echarts.init(document.getElementById('report_export'));
        let report_add = echarts.init(document.getElementById('report_add'));
        let report_edit = echarts.init(document.getElementById('report_edit'));
        let report_details = echarts.init(document.getElementById('report_details'));
        let report_op_details = echarts.init(document.getElementById('report_op_details'));
        let details = echarts.init(document.getElementById('details'));
        window.addEventListener("resize", function() {
            report_search.resize();
            report_export.resize();
            report_details.resize();
            report_add.resize();
            report_edit.resize();
            details.resize();
            report_op_details.resize();
        });

        chart(report_search,report_export,report_add,report_edit,report_details,report_op_details);

        report_details.on("click", function (param){
            let loading = layer.load(1, {
                shade: [0.1,'#fff']
            });
            let user = param.name;
            $.post('{$__url}',
                {
                    chart:'self_chart',
                    user: user
                },
                function(data,status){
                    if (typeof data !== 'undefined') {
                        details.setOption(setLineOptionData(data,'bar'));
                        $("#details").show();
                        layer.open({
                            type: 1,
                            title: user+'--{$lang.data_distribute}',
                            closeBtn: 0,
                            area: ['auto'],
                            shadeClose: true,
                            content: $("#details"),
                            end:function () {
                                $("#details").hide();
                            }
                        });
                    }
                    layer.close(loading);
                }, "json"
            ).error(function(xhr,errorText,errorType){
                let data = eval("("+xhr.responseText+")");
                layer.msg(data['msg']);
            });
        });


    });

    function chart(report_search,report_export,report_add,report_edit,report_details,report_op_details) {
        let loading = layer.load(1, {
            shade: [0.1,'#fff']
        });
        $.post('{$__url}',
            {
                chart:'chart'
            },
            function(data,status){
                if (typeof data['report_search'] !== 'undefined')
                    report_search.setOption(setRoseOptionData(data['report_search']));
                if (typeof data['report_export'] !== 'undefined')
                    report_export.setOption(setRoseOptionData(data['report_export']));
                if (typeof data['report_add'] !== 'undefined')
                    report_add.setOption(setRoseOptionData(data['report_add']));
                if (typeof data['report_edit'] !== 'undefined')
                    report_edit.setOption(setRoseOptionData(data['report_edit']));
                if (typeof data['report_details'] !== 'undefined')
                    report_details.setOption(setLineOptionData(data['report_details'],'bar'));
                if (typeof data['report_op_details'] !== 'undefined')
                    report_op_details.setOption(setPolarOptionData(data['report_op_details']));
                layer.close(loading);
            }, "json"
        ).error(function(xhr,errorText,errorType){
            let data = eval("("+xhr.responseText+")");
            layer.msg(data['msg']);
        });
    }

    function setPolarOptionData(data) {
        let series = [];
        for(let i=0;i<data.series.length;i++){
            let tmp = {
                type: 'bar',
                data: data.series[i].data,
                coordinateSystem: 'polar',
                name: data.series[i].name,
                stack: 'a',
                emphasis: {
                    focus: 'series'
                }
            };
            series.push(tmp);
        }
        return {
            angleAxis: {
                type: 'category',
                data: data.xAxis
            },
            legend: {
                show: true,
                orient: 'vertical',
                left: 'right',
                data: data.legend
            },
            radiusAxis: {
            },
            polar: {
            },
            series: series
        };
    }

    function setRoseOptionData(data){
        return option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data:data.legend
            },
            calculable : true,
            series : [
                {
                    name:'{$lang.data_distribute}',
                    type:'pie',
                    radius : [30, 110],
                    roseType : 'area',
                    data:data.series
                }
            ]
        };
    }

    function setLineOptionData(data,type) {
        let series = [];
        for(let i=0;i<data.series.length;i++){
            let tmp = {
                name:data.series[i].name,
                type:type,
                smooth: true,
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data:data.series[i].data
            };
            series.push(tmp);
        }
        return {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:data.legend,
                bottom: -2
            },
            xAxis: {
                type: 'category',
                data: data.xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: series
        };
    }
</script>